<template>
    <el-row class="container">
        <el-col :span="24">
            <Carousel></Carousel>
            <div class="todayList">
                <h1 class="listTitle">今日推荐</h1>
                <TodayList></TodayList>
            </div>
            <div class="newList">
                <h1 class="listTitle">最新菜谱<router-link :to="{name: 'Foodlist', params: {classId: 0}}">(更多)</router-link ></h1>
                <FoodlistHome></FoodlistHome>
            </div>
            <el-row  :gutter="50">
                <el-col :xs="24" :sm="16">
                    <div class="hotSelect">
                        <h1 class="listTitle">热门分类<router-link to="/Select">(更多)</router-link></h1>
                        <HotSelect></HotSelect>
                    </div>
                    <!-- <div class="hotFood" >
                        <h1 class="listTitle">最受欢迎<router-link to="/Select">(更多)</router-link></h1>
                        <HotFood></HotFood>
                    </div> -->
                </el-col>
                <!-- 广告位 -->
               <el-col :xs="24" :sm="8" >
                 <label class="labelx">广告</label>
                    <div class="advertising">
                        <div class="advertisingBox">
                          <div class="block">
                            <el-carousel trigger="click" height="180px" @change="changLabel">
                              <el-carousel-item v-for="(item,index) in advert" :key="index">
                                <img :src="item.imgage" style="width: 100%;height: 100%;"/>

                              </el-carousel-item>
                            </el-carousel>
                            <div class="label">{{carousellabel}}</div>
                          </div>
                        </div>
                    </div>
                </el-col>
                <!-- 欢乐达人 -->
                <el-col :xs="24" :sm="8">
                  <div style="width: 100%;height: 20px;"></div>
                </el-col>
                <el-col :xs="24" :sm="8" >
                   <h1 class="listTitle">欢乐达人<router-link :to="{name: 'Foodlist', params: {classId: 0}}">(更多)</router-link ></h1>

                   <div style="width: 100%;height: 50px;margin-bottom: 20px;" v-for="(item,index) in allUser" :key="index">
                     <img :src="item.headimage" style="float: left; width: 23%;height: 100%;border-radius: 15px;border: 1px solid #D1DBE5;"/>
                     <div style="float: left;margin-left: 6px;width: 70%;">
                       <label>{{item.petname}}&nbsp;&nbsp;&nbsp;<svg t="1588599339226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3772" width="16" height="16"><path d="M160.3 127.9h704c17.7 0 32 14.3 32 32v704c0 17.7-14.3 32-32 32h-704c-17.7 0-32-14.3-32-32v-704c0-17.6 14.3-32 32-32z" fill="#FEA100" p-id="3773"></path><path d="M569.5 645.7v-0.7c0-42 20.9-79.1 52.9-101.5l-0.3-0.3c-0.6-0.4-1.2-0.9-1.8-1.3-0.7-0.5-1.5-1.1-2.2-1.6-0.6-0.4-1.1-0.8-1.7-1.2-1.1-0.8-2.2-1.5-3.3-2.3l-1.8-1.2c-0.9-0.6-1.8-1.2-2.6-1.7-0.6-0.4-1.2-0.8-1.8-1.1l-2.4-1.5c-0.6-0.4-1.2-0.7-1.8-1.1-0.9-0.6-1.9-1.1-2.9-1.7-0.5-0.3-1-0.6-1.6-0.9-1.2-0.7-2.5-1.4-3.7-2.1-0.6-0.3-1.1-0.6-1.7-0.9-0.9-0.5-1.7-0.9-2.6-1.4l-1.8-0.9c-0.9-0.5-1.9-0.9-2.8-1.4-0.5-0.3-1-0.5-1.6-0.8-1.4-0.7-2.8-1.3-4.2-2-0.5-0.2-1-0.5-1.6-0.7-1-0.4-1.9-0.9-2.9-1.3-0.6-0.3-1.2-0.5-1.8-0.8-0.9-0.4-1.9-0.8-2.9-1.2-0.6-0.2-1.2-0.5-1.7-0.7-1.5-0.6-2.9-1.1-4.4-1.7-0.4-0.2-0.8-0.3-1.2-0.4-1.1-0.4-2.3-0.8-3.4-1.2l-1.8-0.6c-1-0.3-2-0.6-2.9-1l-1.8-0.6c-1.2-0.4-2.4-0.7-3.6-1.1l-1.2-0.3c1.3-0.6 2.5-1.3 3.7-2 0.1-0.1 0.3-0.2 0.4-0.2 2.5-1.4 4.9-2.9 7.3-4.5 0.1-0.1 0.2-0.2 0.4-0.2 1.1-0.7 2.3-1.5 3.4-2.3 0.1 0 0.1-0.1 0.2-0.1 1.2-0.8 2.4-1.7 3.6-2.6h0.1c1.1-0.8 2.2-1.7 3.3-2.5 0.1-0.1 0.3-0.2 0.4-0.3 2.2-1.8 4.3-3.6 6.4-5.5 0.1-0.1 0.3-0.2 0.4-0.4 1-0.9 1.9-1.8 2.8-2.7 0.1-0.1 0.2-0.1 0.2-0.2 1-1 2-2 3-3.1l0.2-0.2c0.9-1 1.8-1.9 2.7-2.9 0.1-0.2 0.3-0.3 0.4-0.5 1.8-2.1 3.6-4.2 5.3-6.4 0.1-0.2 0.3-0.4 0.4-0.6 0.8-1 1.5-2 2.2-3 0.1-0.1 0.2-0.3 0.3-0.4 0.8-1.1 1.6-2.3 2.4-3.5 0.1-0.1 0.2-0.3 0.3-0.4 0.7-1 1.3-2.1 2-3.1 0.1-0.2 0.3-0.5 0.4-0.7 1.4-2.3 2.8-4.7 4.1-7.2 0.1-0.3 0.3-0.5 0.4-0.8 0.5-1 1.1-2.1 1.6-3.1l0.3-0.6c0.6-1.2 1.2-2.5 1.7-3.7l0.3-0.6c0.5-1.1 0.9-2.1 1.4-3.2 0.1-0.3 0.3-0.6 0.4-0.9 1-2.5 2-5.1 2.8-7.7 0.1-0.3 0.2-0.7 0.3-1 0.3-1.1 0.7-2.1 1-3.2 0.1-0.3 0.2-0.5 0.2-0.8 0.4-1.3 0.7-2.6 1.1-4 0.1-0.3 0.1-0.5 0.2-0.8 0.3-1.1 0.5-2.2 0.8-3.3 0.1-0.4 0.2-0.7 0.2-1.1 0.3-1.4 0.6-2.7 0.8-4.1 0.2-1.4 0.5-2.7 0.7-4.1 0.1-0.4 0.1-0.8 0.2-1.1 0.2-1.1 0.3-2.2 0.4-3.3 0-0.3 0.1-0.6 0.1-0.9 0.1-1.4 0.3-2.8 0.4-4.2 0-0.3 0-0.6 0.1-0.9 0.1-1.1 0.1-2.3 0.2-3.4V393c0-1.4 0.1-2.9 0.1-4.3 0-73.4-59.5-132.9-133-132.9s-132.9 59.5-132.9 132.9c0 1.4 0 2.9 0.1 4.3v1.2c0 1.1 0.1 2.3 0.2 3.4 0 0.3 0 0.6 0.1 0.9 0.1 1.4 0.2 2.8 0.4 4.2 0 0.3 0.1 0.6 0.1 0.9 0.1 1.1 0.3 2.2 0.4 3.3 0.1 0.4 0.1 0.8 0.2 1.1 0.2 1.4 0.4 2.8 0.7 4.1 0.2 1.4 0.5 2.7 0.8 4.1 0.1 0.4 0.2 0.7 0.2 1.1 0.2 1.1 0.5 2.2 0.8 3.3 0.1 0.3 0.1 0.5 0.2 0.8 0.3 1.3 0.7 2.7 1.1 4 0.1 0.3 0.2 0.5 0.2 0.8 0.3 1.1 0.6 2.2 1 3.2 0.1 0.3 0.2 0.7 0.3 1 0.9 2.6 1.8 5.2 2.8 7.7 0.1 0.3 0.3 0.6 0.4 0.9 0.4 1.1 0.9 2.1 1.4 3.2l0.3 0.6c0.6 1.3 1.1 2.5 1.7 3.7l0.3 0.6c0.5 1 1 2.1 1.6 3.1 0.1 0.3 0.3 0.5 0.4 0.8 1.3 2.4 2.7 4.8 4.1 7.1 0.2 0.2 0.3 0.5 0.5 0.7 0.7 1 1.3 2.1 2 3.1 0.1 0.1 0.2 0.3 0.3 0.4 0.8 1.2 1.6 2.3 2.4 3.4 0.1 0.2 0.2 0.3 0.3 0.4 0.7 1 1.4 2 2.2 2.9 0.1 0.2 0.3 0.4 0.4 0.6 1.7 2.2 3.5 4.3 5.3 6.4l0.5 0.5c0.9 1 1.7 1.9 2.6 2.9l0.2 0.2c1 1 2 2.1 3 3.1l0.3 0.3c0.9 0.9 1.8 1.8 2.8 2.7l0.4 0.4c2.1 1.9 4.2 3.7 6.4 5.5 0.2 0.1 0.3 0.2 0.5 0.4 1.1 0.9 2.1 1.7 3.2 2.5 1.2 0.9 2.3 1.7 3.5 2.6 0.1 0.1 0.2 0.1 0.2 0.2 1.1 0.8 2.2 1.5 3.3 2.2 0.1 0.1 0.3 0.2 0.4 0.3 2.4 1.6 4.8 3 7.3 4.4 0.2 0.1 0.3 0.2 0.5 0.3 1.2 0.7 2.5 1.4 3.7 2-0.2 0.1-0.4 0.1-0.6 0.2-1.4 0.4-2.8 0.8-4.1 1.2-0.5 0.2-1.1 0.3-1.6 0.5-1.1 0.3-2.1 0.7-3.2 1-0.6 0.2-1.1 0.4-1.7 0.6-1.2 0.4-2.4 0.8-3.6 1.3-0.3 0.1-0.7 0.2-1 0.4-1.5 0.6-3 1.1-4.5 1.7l-1.5 0.6c-1 0.4-2.1 0.8-3.1 1.3-0.6 0.2-1.1 0.5-1.7 0.7-1 0.4-2.1 0.9-3.1 1.4-0.5 0.2-0.9 0.4-1.4 0.6-1.4 0.7-2.9 1.3-4.3 2-0.4 0.2-0.9 0.4-1.3 0.6-1 0.5-2.1 1-3.1 1.5-0.6 0.3-1.1 0.6-1.6 0.8-0.9 0.5-1.9 1-2.8 1.5-0.5 0.3-1 0.6-1.5 0.8-1.3 0.7-2.6 1.5-4 2.2-0.3 0.2-0.7 0.4-1 0.6-1.1 0.6-2.2 1.3-3.3 1.9-0.5 0.3-1.1 0.7-1.6 1-0.9 0.5-1.7 1.1-2.6 1.6-0.5 0.3-1.1 0.7-1.6 1-1 0.6-1.9 1.2-2.8 1.9-0.4 0.3-0.8 0.5-1.2 0.8-1.3 0.9-2.5 1.7-3.8 2.6-0.5 0.4-1 0.7-1.6 1.1-0.8 0.6-1.6 1.1-2.4 1.7-0.6 0.4-1.1 0.8-1.7 1.2-0.8 0.6-1.6 1.2-2.3 1.8l-1.5 1.2c-1.2 0.9-2.3 1.9-3.5 2.8-0.5 0.4-1 0.8-1.5 1.3-0.7 0.6-1.5 1.2-2.2 1.8-0.6 0.5-1.1 1-1.7 1.4-0.7 0.6-1.3 1.2-2 1.8-0.5 0.5-1.1 1-1.6 1.5-0.8 0.7-1.6 1.5-2.4 2.2-0.7 0.7-1.5 1.4-2.2 2.1-0.7 0.6-1.3 1.3-2 1.9l-1.7 1.7c-0.6 0.6-1.1 1.2-1.7 1.7-0.6 0.6-1.1 1.2-1.7 1.7-0.6 0.6-1.1 1.2-1.7 1.8-0.9 0.9-1.7 1.9-2.6 2.8-0.6 0.7-1.2 1.3-1.8 2-0.6 0.6-1.1 1.3-1.7 1.9-0.5 0.6-1 1.1-1.4 1.7-0.6 0.7-1.1 1.3-1.7 2-0.4 0.5-0.9 1.1-1.3 1.7-0.6 0.7-1.1 1.4-1.6 2.1l-0.9 1.2c-1.1 1.4-2.1 2.8-3.2 4.3-0.4 0.5-0.8 1-1.2 1.6-0.5 0.8-1.1 1.5-1.6 2.3-0.4 0.5-0.7 1-1.1 1.6-0.5 0.8-1.1 1.6-1.6 2.4-0.3 0.4-0.5 0.8-0.8 1.2-1.1 1.6-2.1 3.2-3.1 4.8-0.3 0.4-0.6 0.9-0.8 1.3-0.5 0.8-1 1.7-1.5 2.6l-0.9 1.5c-0.5 0.9-1 1.7-1.5 2.6-0.2 0.4-0.4 0.8-0.7 1.2-1.1 1.9-2.1 3.9-3.2 5.8-0.1 0.2-0.2 0.4-0.3 0.5-0.5 0.9-1 1.9-1.4 2.9-0.2 0.4-0.4 0.9-0.7 1.3-0.5 0.9-0.9 1.9-1.4 2.9l-0.6 1.2c-1.5 3.2-2.9 6.5-4.3 9.9-0.2 0.4-0.3 0.7-0.5 1.1-0.4 1-0.8 2.1-1.2 3.1-0.2 0.4-0.3 0.8-0.5 1.2-1.3 3.5-2.6 7-3.7 10.6-0.1 0.3-0.2 0.5-0.2 0.8-0.3 1.1-0.7 2.2-1 3.3l-0.3 1.2c-0.3 1.1-0.7 2.2-1 3.3-0.1 0.2-0.1 0.4-0.2 0.6-1 3.7-1.9 7.4-2.8 11.2l-0.3 1.2c-0.2 1.1-0.5 2.3-0.7 3.4-0.1 0.3-0.1 0.7-0.2 1-0.7 3.7-1.3 7.5-1.9 11.3 0 0.4-0.1 0.7-0.1 1.1-0.2 1.2-0.3 2.3-0.4 3.5v0.1c-0.4 1.8-0.7 3.6-0.7 5.5l0.2 2.1c0 1.5 0.2 3 0.4 4.4 1.9 13.3 13.3 23.5 27.2 23.5h309.4c-20.5-22.1-33-51.7-33-84.2 0.2 0.2 0.2-0.1 0.2-0.4zM695 543.8c-57 0-103.2 46.2-103.2 103.3 0 57 46.2 103.3 103.2 103.3s103.2-46.2 103.2-103.3c0-57-46.2-103.3-103.2-103.3z m57.7 78.3L708 706.9c-0.7 3.4-2.7 6.5-5.8 8.5-2.3 1.5-4.9 2.1-7.4 2.1s-5.1-0.6-7.4-2.1c-3.1-2-5.1-5.1-5.8-8.5l-44.7-84.8c-3.9-6.2-2.2-14.3 4-18.3 6.2-3.9 14.3-2.2 18.3 4l35.7 67.7 35.7-67.7c3.9-6.2 12.1-7.9 18.3-4 6 3.9 7.8 12.1 3.8 18.3z" fill="#FFFFFF" p-id="3774"></path></svg></label><br />
                       <label style="position: relative;top: 6px;">{{item.focusList.length}} 粉丝</label>

                       <div v-if="item.uid != $store.state.user.uid" style="position: relative;top: -36px;left: 140px;" >
                         <el-button icon="el-icon-plus" @click="focus(item)" v-if="item.isfc == false">关注</el-button>
                         <el-button  @click="delfocus(item)" v-if="item.isfc == true" type="danger" style="font-size: 12px;">取消关注</el-button>
                       </div>

                       <div v-else style="position: relative;top: -36px;left: 140px;">
                         <el-button @click="tapUserCenter" type="primary">
                           <label style="font-size: 12px;" >我的主页</label></el-button>
                       </div>
                     </div>
                   </div>

                   <div>
                   </div>
                 </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>

 import axios from 'axios'

import temCarousel from "@/components/temCarousel.vue"
import FoodlistHome from "@/components/temCardHome.vue"
import TodayList from "@/components/temTodayList.vue"
import HotSelect from "@/components/temHotSelect.vue"
import HotFood from "@/components/temHotFood.vue"


export default {
  name: "Home",
  data () {
    //选项 / 数据
    return {
        myTitle: '标题',
        advert:[],
        allUser:[],
        carousellabel:'',
    }
  },
  methods: {
    //事件处理器
    getAdvert: function(){
      let url = 'api/consumer-index/around_consumer/getAllAdvert'
      axios.get(url).then(res => {
        console.log(res.data)
        this.advert = res.data
      })
    },
    getAllUser: function(){
      let url = 'api/consumer-index/around_consumer/getAllUser?page=' + '-1'
      axios.get(url).then(res => {
        this.allUser = res.data

        this.allUser.map(user=>{
          this.isfocus(user)
           console.log(this.allUser)
        })
        // console.log(this.allUser)
      })
      },

      //关注和取消关注
      focus: function(item){
        let url = 'api/consumer-index/around_consumer/focus?' + 'uid=' + this.$store.state.user.uid + '&uided=' + item.uid
        axios.get(url).then(res => {
          item.isfc = true
        })
      },

      delfocus:function(item){
        let url = 'api/consumer-index/around_consumer/delfocus?' + 'uid=' + this.$store.state.user.uid + '&uided=' + item.uid

        axios.get(url).then(res => {
          item.isfc = false
        })
        },
//是否关注
isfocus: function(uided){
  let url = 'api/consumer-index/around_consumer/isfocus?' + 'uid=' + this.$store.state.user.uid + '&uided=' +uided.uid
  console.log(url)
  axios.get(url).then(res => {
     uided.isfc = res.data
     console.log(uided)
    console.log(res.data)
  })

},
    changLabel: function(e){
      let _this = this
      let x = e
        setTimeout(function(x){
          _this.carousellabel = _this.advert[e].advertname
        },500)
    },
    tapUserCenter: function(){
      this.$router.push('Vip');
    }
  },
  components: {
    //自定义组件
    Carousel: temCarousel, //轮播
    TodayList: TodayList, //今日推荐
    FoodlistHome: FoodlistHome, //最新列表
    HotSelect: HotSelect, //热门分类
    HotFood: HotFood, //热门作品
    // 'wbc-menu': Menu,
  },
  created () {
    //生命周期函数
    this.getAdvert()
    this.getAllUser()

  }
}
</script>

<style>
.newList,
.todayList,
.hotFood,
.otherWeb {
  margin-bottom: 10px;
}
.hotSelect {
  margin-bottom: 30px;
}

.otherWeb div.el-col {
  text-align: center;
  /*background:#fff;*/
  margin: 10px 0;
}
.otherWeb img {
  width: 100%;
}
.advertisingBox {
  background: #f4f0ec;
  margin-top: 2px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .label{
    position: absolute;
    top: 180px;
    width: 27.52%;
    z-index: 100;
    background-color: #DCDCDC;
    padding-left: 8px;
    }
    .labelx{
      z-index: 100;
      position: absolute;
      left: 95.5%;
      top: 3px;
      font-size: 10px;
      background-color: rgba(102,102,102,.6);
      }
</style>
